<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>web客服插件</title>

    <link rel="stylesheet" type="text/css" href="__ROOT__/static/css/hui.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/css/material/materialdesignicons.min.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/css/my_css.css"/>
    <link rel="stylesheet" href="__ROOT__/static/css/wui/2.3.0/weui.min.css">

    <style>
        .weui-cells:after {
            opacity: 0;
        }
        .layui-layer-shade {
            background-color: #888888 !important;
        }
        .hui-number-point {
            right: 25px !important;
            color: white !important;
            top: 2px !important;
            border-radius: 50px !important;
        }

        .hui-list > a {
            height: 60px !important;
        }

        .hui-list-text {
            line-height: 59px;
            height: 59px;
        }

        .weui-media-box__title {
            font-size: 16px;
        }


        .weui-cell:before {
            opacity: 0;
        }

        .weui-cell_swiped {
            border: 1px solid rgba(0, 0, 0, .1);
            border-bottom: none;
            border-left: none;
            border-right: none;
        }

        .weui-cells .weui-cell_swiped:first-child {
            border: none;
        }

        .last-msg-time {
            font-size: 10px;
            color: #868686;
        }

        .weui-media-box__desc {
            -webkit-line-clamp: 1;
        }

        .weui-media-box__desc {
            color: #5d5e5b;
            font-size: 13px;
            display: block;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        a.weui-media-box {
            background: white !important;
        }

        .weui-media-box_appmsg .weui-media-box__hd {
            margin-right: 10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50px;
        }

        .weui-media-box_appmsg .weui-media-box__thumb {
            height: 100%;
        }

        .weui-cell_swiped > .weui-cell__ft {
            width: 130px;
        }

        .weui-swiped-btn {
            width: 100%;
            text-align: center;
            line-height: 70px;
            padding: 0;
        }

        .msg-list-line {
            padding: 10px;
        }


        .weui-cells {
            margin-bottom: 55px;
        }

        .weui-toast_content {
            color: white !important;
        }



        /*自定义 load*/
        #hui-dialog-in {
            border-radius: 10px;
        }
        #hui-dialog-btn-line > div:first-child {
            color: #666 !important;
            border-right: 1px solid #F4F5F6;
        }
        #hui-dialog-btn-line > div {
            width: 49%;
            color: #3388fe;
            background: #ffffff;
        }
        /*end*/

        #msg-list-box .emoji_icon{
            position: relative !important;
            top: 6px !important;
            left: 2px !important;
            margin-right: 3px !important;
        }

    </style>
</head>
<body>

<header class="hui-header">
    <h1>客服-消息列表</h1>
</header>

<div class="page__bd">
    <div class="weui-cells mescroll"  id="mescroll" >　
        <div id="msg-list-box">

        </div>
    </div>
</div>


<script src="__ROOT__/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="__ROOT__/static/js/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>

<!--下拉加载组件-->
<link rel="stylesheet" href="__ROOT__/static/mescroll/dist/mescroll.min.css">
<link rel="stylesheet" href="__ROOT__/static/mescroll/option/mescroll-option.css">
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        -webkit-touch-callout:none;
        -webkit-tap-highlight-color:transparent;
    }
    ul{list-style-type: none}

    /*列表*/
    .mescroll-downwarp .downwarp-content {
        padding-bottom: 0;
    }

    .mescroll{
        position: fixed;
        /*top: 50px;*/
        /*bottom: 51px;*/
        /*top: 10px;*/
        /*bottom: 180px;*/
        /*height: auto;*/
    }
    /*回到顶部按钮*/
    .mescroll-totop {
        bottom: 70px;
        background-color: #f3f2f2;
        text-align: center;
        opacity: 0.7;
        width: 42px;
        height: 42px;
        line-height: 42px;
    }
    .mescroll-upwarp{
        background: #ffffff;
        padding-bottom: 70px;
    }
</style>
<script src="__ROOT__/static/mescroll/dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__ROOT__/static/mescroll/option/mescroll-option.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        //自定义表情格式替换
        function replace_em(str) {
            str = str.replace(/\</g, '&lt;');
            str = str.replace(/\>/g, '&gt;');
            str = str.replace(/\n/g, '<br/>');
            str = str.replace(/\#qq_([0-9]*)#/g, "<img class='emoji_icon' src='../chat/dist/img/qq/$1.gif' />");
            str = str.replace(/\#xl_([0-9]*)#/g, "<img class='emoji_icon' src='../chat/dist/img/xl/$1.png' />");
            return str;
        }

        /*下拉组件使用--demo*/
        //创建MeScroll对象
        var mescroll = initMeScroll("mescroll", {
            //下拉刷新
            down:{
                auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
                callback: downCallback
            },
            //上拉加载
            up: {
                auto:true,//初始化完毕,是否自动触发上拉加载的回调
                isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                callback: upCallback, //上拉加载的回调
                toTop:{ //配置回到顶部按钮
                    src : "/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    //offset : 1000
                },
                htmlNodata: '<p class="upwarp-nodata">-- 已加载全部会话 --</p>',
            }
        });

        /*下拉刷新的回调 */
        function downCallback(){
            setTimeout(function () {
                location.reload();
            },500);
        }

        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数*/
        /*后台分页条数必须大于这里的10条*/
        function upCallback(page){
            setTimeout(function () {
                $.ajax({
                    url: '/app/websocket/test/getLastMessage.html',
                    data:{
                        page:page.num
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(res) {
                        var curPageData = res.data.list; // 接口返回的当前页数据列表
                        var totalSize = res.data.total; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)

                        mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
                        //设置列表数据
                        for (var i = 0; i < curPageData.length; i++) {
                            var newObj = curPageData[i];

                            var html = ' <div class="weui-cell weui-cell_swiped" >'
                                            +' <div class="weui-cell__bd last-message" data-uid="'+newObj.uid+'" data-ripple="ripple" style="transform: translate3d(0px, 0px, 0px);">'
                                                +'<div class="weui-cell msg-list-line">'
                                                    +'  <div class="weui-cell__bd">'
                                                            +' <a href="javascript:void (0)" class="weui-media-box weui-media-box_appmsg" style=" padding: 0 2px 0 0;">'
                                                                +' <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="'+newObj.img+'" alt=""></div>'
                                                                +'<div class="weui-media-box__bd"><h4 class="weui-media-box__title" style="font-size: 13px">游客'+newObj.uid+'</h4><p class="weui-media-box__desc">'+replace_em(newObj.message)+'</p></div>'
                                                            +'</a>'
                                                        +'</div>'
                                                         +' <div class="weui-cell__ft last-msg-time">'+newObj.create_time+'</div>'
                                                + '</div>'
                                            + '</div>'

                                            +'<div class="weui-cell__ft">'
                                                +'<a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" data-uid="'+newObj.uid+'" href="javascript:void (0)">删除</a>'
                                                +'<a class="weui-swiped-btn weui-swiped-btn_default close-swipeout set-top" href="javascript:">置顶</a>'
                                            +'</div>'

                                        + '</div>';

                            $('#msg-list-box').append(html);

                        }

                        /*默认表情插件，表情渲染*/
                        // $("#msg-list-box").emojiParse({
                        //     icons: [
                        //         {
                        //             path: "__ROOT__/page/chat/dist/img/tieba/",
                        //             file: ".jpg",
                        //             placeholder: "#bd_{alias}#",
                        //         },
                        //         {
                        //             path: "__ROOT__/page/chat/dist/img/qq/",
                        //             file: ".gif",
                        //             placeholder: "#qq_{alias}#"
                        //         },
                        //         {
                        //             path: "__ROOT__/page/chat/dist/img/xl/",
                        //             file: ".png",
                        //             placeholder: "#xl_{alias}#"
                        //         }
                        //     ]
                        // });

                        $.getScript("__ROOT__/static/js/hui.js");
                        $.getScript("__ROOT__/static/js/wui/jquery-weui.min.js");
                        $.getScript("__ROOT__/static/js/wui/1.2.1/weui.min.js");


                        $('.delete-swipeout').click(function () {
                            var removeDiv = $(this).parents().eq(1);
                            var uid = $(this).attr('data-uid');

                            hui.confirm('谨慎！删除后不可恢复？', ['取消', '确定'], function () {
                                hui.loading('删除中');
                                setTimeout(function(){

                                    $.ajax({
                                        type: "POST",
                                        data: {
                                            'uid': uid
                                        },
                                        url: "/app/websocket/test/deleteMessage.html",
                                        dataType: "json",
                                        success: function (res) {
                                             if (res.code){
                                                 removeDiv.remove();
                                             }
                                            hui.loading(false, true);
                                            hui.toast(res.msg);
                                        },
                                        error: function (res) {
                                            console.log(res);
                                        }
                                    });

                                    // removeDiv.remove();
                                    // hui.loading(false, true);
                                    // hui.toast('删除成功');
                                }, 1200);

                            }, function () {
                                console.log('取消后执行...');
                            });
                        });

                        hui('.set-top').click(function () {
                            hui.toast('待完善..');
                        });

                        $('.last-message').click(function(e){
                            e.preventDefault();
                            var uid = $(this).attr('data-uid');
                            // hui.toast('uid：' + uid);

                            window.location.href = '/page/chat/service.html?uid='+uid;

                        });



                    },
                    error: function(e) {
                        //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                        mescroll.endErr();
                    }
                });
            },500)
        }


        /*end*/
    })
</script>
<!--下拉加载END-->

<!--表情包-->
<link rel="stylesheet" href="__ROOT__/static/emoji/jquery.emoji.css">
<script src="__ROOT__/static/emoji/jquery.emoji.js" type="text/javascript" charset="utf-8"></script>
<!--end-->
</body>
</html>
